export default {
    data() {
        return {
            pageScale: 1,
            pageOffset: 0,
        }
    },
    mounted() {
        if (this.$route.query.fixed) return
        this.autoSize()
        window.addEventListener('resize', this.autoSize)
    },
    methods: {
        autoSize() {
            let basePage = {
                width: 1920,
                height: 1080,
                backgroundColor: '#04101C'
            }
            let win = {}
            win.width = window.innerWidth
            win.height = window.innerHeight
            // window.devicePixelRatio
            let minHeight = win.width / basePage.width * basePage.height
            // let scale = 1
            if (win.height > minHeight) {
                this.pageScale = win.width / basePage.width
                this.pageOffset = 0
            } else if (win.height < minHeight) {
                this.pageScale = win.height / basePage.height
                this.pageOffset = (win.width - basePage.width * this.pageScale) / 2 / this.pageScale
                minHeight = win.height
            } else {
                this.resetPage()
                return
            }
            document.getElementById('app').style.height = `${minHeight}px`
            document.getElementById('app').style.backgroundColor = basePage.backgroundColor
            document.getElementsByTagName('html')[0].style.backgroundColor = basePage.backgroundColor
        },
        resetPage() {
            this.pageScale = 1
            this.pageOffset = 0
            document.getElementById('app').style.height = `auto`
            document.getElementById('app').style.backgroundColor = '#F4F4F4'
            document.getElementsByTagName('html')[0].style.backgroundColor = '#ffffff'
        }
    },
    beforeRouteLeave(to, from, next) {
        setTimeout(() => {
            this.resetPage();
            next()
        }, 100)
        window.removeEventListener('resize', this.autoSize);
    }
}
